<template>
	<view>
		<u-navbar title="我的订单"></u-navbar>

		<!-- 选项卡 -->
		<view class="orderTab_con">
			<u-tabs :list="tabList" :is-scroll="false" :current="tabCurrent" active-color="#2CAB68" @change="tabChange">
			</u-tabs>
		</view>

		<view class="orderList_box">
			<view class="orderItem" v-for="(item,index) in orderList" :key="index">
				<view class="orderHead" @click="orderDetail(item.order_id)">
					<view class="orderSn">订单编号：{{item.order_sn}}</view>
					<view class="orderStatus">{{item.order_status_str}}</view>
				</view>
				<view class="goodsCon" v-for="(goods_list,key) in item.goods_list" :key="key"
					@click="orderDetail(item.order_id)">
					<view class="goodsPic">
						<image :src="goods_list.rec_goods_imgs"></image>
					</view>
					<view class="goodsInfor">
						<view class="goodsName">
							{{goods_list.rec_goods_name}}
						</view>
						<view class="goodsPrice">
							<text>价格：¥{{goods_list.rec_goods_price}}</text>
							<text>数量：{{goods_list.rec_goods_num}}</text>
						</view>
						<view class="goodsSpec">
							规格：{{goods_list.spec_key_name}}
						</view>
					</view>
				</view>
				<view class="orderCount">
					<view class="orderTotal_con">
						<view class="totalTit">共{{item.goods_list.length}}件商品</view>
						<view class="totalMoney">合计：
							<text>￥{{item.goods_price}}</text>
						</view>
					</view>
					<view class="order_post">
						<view class="orderCancel" v-if="item.order_status==0" @click="orderHandle(item.order_id,'40')">
							取消订单
						</view>
						<view class="orderCancel" v-if="item.order_status>0 && item.order_status<40 && item.is_tui==0"
							@click="orderHandle(item.order_id,'50')">
							申请退款
						</view>
						<view class="orderPay" v-if="item.order_status==0"
							@click="payDo(item.order_id,item.total_amount)">
							立即支付
						</view>
						<view class="orderPay" v-if="item.order_status==20" @click="orderHandle(item.order_id,'30')">
							确认收货
						</view>
					</view>
				</view>
			</view>

			<!-- 分页 -->
			<view class="dataEmpty_con">
				<!-- 数据为空 -->
				<!-- <u-empty v-if="orderList.length==0"></u-empty> -->
				<!-- 加载更多 -->
				<view class="loadmore_box" v-if="orderList.length>0">
					<u-loadmore :status="loadStatus" :icon-type="iconType" :load-text="loadText" @loadmore="loadmore" />
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		pay
	} from '@/util/pay.js';
	export default {
		data() {
			return {
				// 分页
				pages: 1,
				limit: 10,
				last_page: 0,

				// 加载更多
				loadStatus: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '上拉或点击加载更多',
					loading: '努力加载中',
					nomore: '没有更多了'
				},

				// 选项卡
				tabList: [{
					name: '全部',
					status: 'all',
				}, {
					name: '待支付',
					status: '0',
				}, {
					name: '待发货',
					status: '10',
				}, {
					name: '待收货',
					status: '20',
				}, {
					name: '已完成',
					status: '30',
				}, {
					name: '退货',
					status: '50',
				}],
				tabCurrent: 0,
				tabStatus: 'all',

				// 订单列表
				orderList: [],
			}
		},
		onLoad(option) {
			// uni.showLoading({
			// 	title: '加载中'
			// });
			console.log(option)
			var _this = this;
			_this.tabCurrent = option.index;
			_this.tabStatus = option.status;
		},
		onShow() {

		},
		onReady() {
			var _this = this;
			_this.getOrderList();
		},
		onReachBottom() {
			var _this = this;
			_this.loadmore();
		},
		methods: {
			// 选项卡切换
			tabChange(index) {
				var _this = this;
				_this.tabCurrent = index;
				_this.tabStatus = _this.tabList[index].status;
				_this.pages = 1;
				_this.getOrderList();
			},

			// 获取订单列表
			async getOrderList() {
				var _this = this;
				_this.$u.get('/api/shop.order/getList', {
					pages: _this.pages,
					limit: _this.limit,
					status: _this.tabStatus,
				}).then(res => {
					uni.hideLoading();
					console.log("==获取订单列表==");
					console.log(res);
					var orderList = _this.orderList;
					if (_this.pages == 1) {
						orderList = [];
					}
					_this.orderList = orderList.concat(res.data);

					// 分页状态更新
					_this.last_page = res.extend.last_page;
					if (_this.pages >= _this.last_page) _this.loadStatus = 'nomore';
					else _this.loadStatus = 'loadmore';
				}).catch(res => {
					console.log(res);
				})
			},

			// 点击加载更多
			loadmore() {
				var _this = this;
				if (_this.pages >= _this.last_page) return;
				_this.loadStatus = 'loading';
				_this.pages = ++_this.pages;
				setTimeout(() => {
					if (_this.pages >= _this.last_page) _this.loadStatus = 'nomore';
					else _this.loadStatus = 'loading';
					_this.getOrderList();
				}, 2000)
			},

			// 订单详情
			orderDetail(order_id) {
				console.log(order_id)
				uni.navigateTo({
					url: '../orderDetail/orderDetail?order_id=' + order_id
				})
			},

			// 修改订单状态
			orderHandle(order_id, value) {
				var _this = this;
				_this.$u.post('/api/shop.order/updateStatus', {
					order_id: order_id,
					value: value,
				}).then(res => {
					console.log(res);
					uni.showToast({
						title: res.msg,
						duration: 2000
					});
					setTimeout(function() {
						_this.pages = 1;
						_this.getOrderList();
					}, 2000)
				}).catch(res => {
					console.log(res);
				})
			},

			// 订单支付
			payDo(order_id, totalPrice) {
				console.log(order_id, totalPrice);
				var _this = this;
				let platform = uni.getSystemInfoSync().platform;
				// console.log(platform);
				// platform = 'android';
				if(platform=='android' || platform=='ios'){
					_this.$u.post('/api/shop.order/order_pay', {
						order_id: order_id,
					}).then(res => {
						uni.hideLoading();
						console.log("==支付结果==");
						console.log(res);
					
						pay(res, _this, function() {
							uni.showToast({
								title: res.msg,
								duration: 2000
							});
							setTimeout(function() {
								_this.pages = 1;
								_this.getOrderList();
							}, 2000)
						}, function() {
							// uni.redirectTo({
							// 	url: '/package/mall/orderList/orderList?status=all',
							// });
						});
					}).catch(res => {
						console.log(res);
					})
				}else{
					uni.showModal({
						content:'小程序暂不支持在线购买，请下载APP',
						title:'提示',
						confirmText:'去下载',
						cancelText:'暂不下载',
						success:function(e){
							if(e.confirm){
								uni.navigateTo({
									url:'/pages/agreement/agreement?id=4'
								})
							}
						}
					})
				}
			},

		}
	}
</script>

<style scoped lang="scss">
	/* 选项卡 */
	.tabBox {
		background: #fff;
		border-bottom: 1rpx solid #eee;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
	}

	.tabItem {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 32rpx;
		color: #333;
		position: relative;
	}

	.tabItem.active {
		color: #333;
	}

	.tabItem.active:before {
		content: '';
		width: 32rpx;
		height: 4rpx;
		background-color: #333;
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
	}

	/* 订单列表 */
	.orderList_box {
		padding: 0 30rpx;
		overflow: hidden;
		margin-top: 20rpx;
	}

	.orderItem {
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
	}

	.orderHead {
		font-size: 28rpx;
		padding: 30rpx 20rpx;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.orderStatus {
		color: $uni-color-error;
	}

	.goodsCon {
		padding: 30rpx 20rpx;
		border-top: 1rpx solid #eee;
		border-bottom: 1rpx solid #eee;
		overflow: hidden;
	}

	.goodsPic {
		float: left;
		width: 150rpx;
		height: 150rpx;
	}

	.goodsInfor {
		float: left;
		width: 480rpx;
		margin-left: 20rpx;
	}

	.goodsName {
		font-size: 32rpx;
		color: #000;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.goodsPrice {
		font-size: 24rpx;
		color: #333;
		overflow: hidden;
		margin-top: 20rpx;
	}

	.goodsPrice text {
		margin-right: 20rpx;
	}

	.goodsSpec {
		font-size: 24rpx;
		color: #999;
		overflow: hidden;
		margin-top: 10rpx;
	}

	.orderCount {
		padding: 30rpx 20rpx;
		overflow: hidden;
	}

	.orderTotal_con {
		font-size: 28rpx;
		padding-bottom: 30rpx;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.orderTotal_con .totalTit {
		color: #333;
	}

	.orderTotal_con .totalMoney {
		color: #333;
	}

	.orderTotal_con .totalMoney text {
		color: $uni-color-error;
	}

	.order_post {
		overflow: hidden;
		display: flex;
		justify-content: flex-end;
	}

	.orderCancel {
		padding: 0 20rpx;
		height: 56rpx;
		line-height: 56rpx;
		text-align: center;
		color: #AFAFAF;
		font-size: 26rpx;
		border: 2rpx solid #AFAFAF;
		border-radius: 34rpx;
		overflow: hidden;
	}

	.orderPay {
		padding: 0 20rpx;
		height: 56rpx;
		line-height: 56rpx;
		text-align: center;
		color: $uni-color-error;
		font-size: 26rpx;
		border: 2rpx solid $uni-color-error;
		border-radius: 34rpx;
		overflow: hidden;
		margin-left: 20rpx;
	}
</style>
